<template>
  <div class="item-box">
    <div class="item-title">计算资源类型统计</div>
    <div class="container">
      <div ref="myecharts" id="echart"></div>
    </div>
  </div>
</template>
<script>
export default {
  props:['echartData','echartType'],
  data () {
    return {
      myChart:null,
    }
  },
  // 页面初始化挂载dom
  mounted () {
    this.$nextTick(()=>{
      this.getLoadEcharts()
    })
  },
  methods: {
    getLoadEcharts () {
      this.myChart = this.$echarts.init(this.$refs.myecharts)
      var colorList = ['#5470c6','#91cc75','#fac858', '#ee6666',]
      var option = {
        // color: colorList,
        // title: {
        //   x: 'center',
        //   y: 'center',
        //   textStyle: {
        //     color: '#000',
        //     fontSize: 20
        //   }
        // },
        // legend: {
        //   orient: 'vertical',
        //   bottom: 5,
        //   align: 'right',
        //   right: 15,
        //   textStyle: {
        //     color: '#000',
        //     fontSize: 20
        //   },
        //   selectedMode: false,
        //   data: ['元素1', '元素2', '元素3']
        // },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            // center: ['50%', '50%'],
            radius: '85%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              fontSize: 14,
              color: '#000',
              // formatter: function (data) {
              //   return data.name + ':' + data.percent.toFixed(0) + '%'
              // }
            },
            // labelLine: {
            //   normal: {
            //     length: 15,
            //     length2: 15,
            //     lineStyle: {
            //       width: 2
            //     }
            //   }
            // }, // "echarts": "^4.2.0-rc
            data: this.echartData ||[]
          }
        ]
      }
      if(this.echartType=='pie2'){
        option.series[0].radius = ['20%', '80%']
        option.series[0].itemStyle= {
          normal: {
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: 6,
            color: function (params) {
              return colorList[params.dataIndex]
            }
          }

        }
      }
      this.myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="less">
.item-box{
  height: 380px;
  width: 500px;
  .item-title{
    font-weight: 700;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
    padding: 0 26px;
    border-bottom: 1px #e9e9e9 solid;
  }
}
.container {
  width: 500px;
  height: 320px;
}
#echart {
  width: 100%;
  height: 100%;
}
</style>
